<template>
<!--    项目用地  项目用地表-->
    <div>
        <div class="title">项目用地表</div>
            <a-form @submit="handleSubmit" class="form" layout="horizontal" :form="form">
                <a-row class="form-row" :gutter="32">
                    <a-col :span="8">
                        <a-form-item label="项目编号">
                            <a-input
                                disabled
                                placeholder="请输入项目编号"
                                v-decorator="['project_number',{initialValue:projectNum},
                                {rules: [{ required: true, message: '请输入项目编号', whitespace: true}]}]"/>
                        </a-form-item>
                    
                    </a-col>
                    <a-col :span="8">
                        <a-form-item
                            label="地块id">
                            <a-input
                                disabled
                                placeholder=""
                                v-decorator="['land_id',{initialValue:landId},
                                {rules: [{ required: true, message: '', whitespace: true}]}]"/>
                        </a-form-item>
                    </a-col>
                    <a-col :span="24">
                        <a-form-item
                            label="项目所用地块描述">
                            <a-textarea placeholder="项目所用地块描述"
                                        :autosize="{ minRows: 4, maxRows: 6 }"
                                        v-decorator="['land_desc',
                                {rules: [{ required: true, message: '项目所用地块描述', whitespace: true}]}]"/>
                        </a-form-item>
                    </a-col>
                    <a-col :span="8">
                        <a-form-item
                            label="项目所用地块边界">
                            <a-input
                                placeholder="项目所用地块边界"
                                v-decorator="['land_around',
                                {rules: [{ required: true, message: '项目所用地块边界', whitespace: true}]}]"/>
                        </a-form-item>
                    </a-col>
                    <a-col :span="8">
                        <a-form-item
                            label="地块方位描述">
                            <a-input
                                placeholder="地块方位描述"
                                v-decorator="['position_desc',
                                {rules: [{ required: true, message: '地块方位描述', whitespace: true}]}]"/>
                        </a-form-item>
                    </a-col>
                    <a-col :span="8">
                        <a-form-item
                            label="使用土地面积">
                            <a-input
                                placeholder="使用土地面积"
                                v-decorator="['land_area',
                                {rules: [{ required: true, message: '使用土地面积', whitespace: true}]}]"/>
                        </a-form-item>
                    </a-col>
                    <a-col :span="8">
                        <a-form-item
                            label="所用土地建筑面积">
                            <a-input
                                placeholder="所用土地建筑面积"
                                v-decorator="['build_area',
                                {rules: [{ required: true, message: '所用土地建筑面积', whitespace: true}]}]"/>
                        </a-form-item>
                    </a-col>
                    <a-col :span="8">
                        <a-form-item
                            label="建档日期">
                            <a-date-picker style="width: 100%"
                                           v-decorator="['create_date',
                                {rules: [{ required: true, message: '建档日期'}]}]"/>
                        </a-form-item>
                    </a-col>
                    <a-col :span="8">
                        <a-form-item
                            label="建档人员">
                            <a-input
                                placeholder="建档人员"
                                v-decorator="['creator',
                                {rules: [{ required: true, message: '建档人员', whitespace: true}]}]"/>
                        </a-form-item>
                    </a-col>
                </a-row>
                
                <a-row class="form-row" :gutter="32">
                    <a-col :span="24">
                        <a-form-item
                            label="相关文档">
                            <up-load-drag @change="handleUploadChange"></up-load-drag>
                        </a-form-item>
                    </a-col>
                </a-row>
                
                <footer-tool-bar>
                    <a-button type="primary" :loading="loading" htmlType="submit">保存</a-button>
                </footer-tool-bar>
            </a-form>
        
        <!--         fixed footer toolbar -->
    
    </div>
</template>

<script>

    import FooterToolBar from '@/components/tools/FooterToolBar'
    import cities from '@/db/cities'
    import indexedDB from '@/db/db'
    import moment from 'moment'
    import UpLoadDrag from '@/components/upload/UpLoadDrag'
    export default {
        name: "AddProject",
        components: {
            FooterToolBar,
            UpLoadDrag,
        },
        props:{
            projectNum: String,
            landId: String
        },
        data() {
            return {
                options: cities,
                loading: false,
                form: this.$form.createForm(this),
                //
                dataInit: {
                    division: ['河南省', '郑州市', '金水区'],
                    year: '2019',
                    lines: '京广快速铁路',
                    stations: '郑州东站',
                    landLevel: '一级',
                    devMethod: '其他',
                    devType: '一般性',
                    approvalResult: '未通过',
                    approvalStage: '上报',
                    projectBuildStage: '未开建',
                    test: '123',
                },
                linesData: [],
                stationsData: [],
                landLevelData: [],
                devMethodData: [],
                devTypeData: [],
                approvalResultData: [],
                approvalStageData: [],
                projectBuildStageData: [],
                filesList:[]
            }
        },
        mounted() {
        
        },
        methods: {
            createDateOnChange(e){
                console.log(e)
            },
            handleUploadChange(list){
                this.filesList = list
            },
            handleSubmit(e) {
                e.preventDefault()
                this.form.validateFields((err, values) => {
                    if (!err) {
                        // indexedDB 不支持date格式  转换成字符串
                        values.create_date = moment(values.create_date).format('YYYY-MM-DD')
                        // 文件
                        values.files = this.filesList
                        // eslint-disable-next-line no-console
                        console.log(values)
                        indexedDB.insert({name:'projectLand'}, values).then(res => {
                            this.$emit('saveSuccess')
                            
                        })
                    }
                })
            },
            
        },
    }
</script>

<style lang="scss" scoped>
    .card {
        margin-bottom: 24px;
    }
    .title {
        font-size: 20px;
        line-height: 28px;
        font-weight: 500;
        color: rgba(0, 0, 0, 0.85);
        margin: 16px 0 30px 0;
    }
</style>